﻿<%@ Page Title="Map" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="GISMap.aspx.vb" Inherits="WRDBWeb.Map" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/" type="text/javascript"></script>
    <script src="Scripts/jsapi_vsdoc12_v33.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2><asp:Label ID="lblInfo" runat="server" Text="A total of ? records are selected and available for output"></asp:Label></h2>
            </hgroup>
         </div>
     </section>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server" >
    <%--esri map doesn't work well with master pages; to work around this, have all map markup on its own page and reference it using a frame --%>    
    <%-- Very simple map I designed --%>
    <iframe name="mapframe" runat="server" src="MapOnly.aspx" frameborder="0" border="0px" style="width:100%; height:500px;"></iframe>

    <%-- Acquired from ArcGISOnline.com --%>
    <%-- These two do not work and return error; perhaps because proxy server is required --%>
<%--        <iframe name="mapframe" id="Iframe1" runat="server" src="Maps/Editor/index.html" style="width:100%; height:500px;"></iframe>
        <iframe name="mapframe" id="Iframe2" runat="server" src="Maps/basicviewer/index.html" style="width:100%; height:500px;"></iframe>--%>

    <%-- This one does work however --%>
        <%--<iframe name="mapframe" id="Iframe3" runat="server" src="Maps/Legend/index.html" style="border-style: none; width:100%; height:500px;" ></iframe>--%>


    <script type="text/javascript">
        
        dojo.require("esri.map");
        dojo.require("esri.arcgis.utils");

        var map = null;

        //need geometry services so can reproject point
        var gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");


        //when the button is clicked, retrieve lat/long from server and plot the point
        function btnAlert_Click() {
            PageMethods.GetLatLong(OnSucceeded, OnFailed);
        }

        function OnSucceeded(result, userContext, methodName) {

            //the map control is in a frame (to avoid problems with ASP.net); must reference using the name of the frame
            map = parent.mapframe.map;

            map.centerAt([-79.5, 8.86]);

            //clear prior graphics
            map.graphics.clear();

            //dojo.connect(map, "onLayerRemove", function () { alert("layer removed"); });
            //dojo.connect(map, "onLayerAdd", function () { alert("layer added"); });
            dojo.connect(map, "onClick", function (evt) {
                map.centerAt(evt.mapPoint);
                //var point = evt.mapPoint;
                //var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
                //var graphic = new esri.Graphic(point, symbol);
                //map.graphics.clear();
                //map.graphics.add(graphic);

                //var ptmap = new esri.geometry.Point(evt.mapPoint.getLongitude(),evt.mapPoint.getLatitude())
                //var pt;
                //var srLatLon = new esri.SpatialReference(4326);
                //gsvc.project([evt.mapPoint], srLatLon, function (mp2) { pt = mp2[0]; }, alert("error"))
                

                //convert back
                //var pt2;
                //gsvc.project([pt], map.spatialReference, function (mp2) { var pt2 = mp2[0]; })
            });

            //add a symbol at the specified lat/long point obtained from the server
            var lat = result[0];
            var lon = result[1];

            //create point at lat/long returned from server
            var srWGS = new esri.SpatialReference(4326);
            var srMap = new esri.SpatialReference(map.spatialReference.wkid)
            var pt = new esri.geometry.Point(lon, lat, srWGS);

            //OnProjected([pt]);

            gsvc.project([pt], srMap, OnProjected);

        }

        function OnProjected(ProjectedPoints) {
            //after points are reprojected, add to map
            for (var i = 0; i < ProjectedPoints.length; i++) {
                //add symbol to graphics layer
                var sym = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE);
                //sym.color = new dojo.Color([255, 255, 0], 1);
                var g = new esri.Graphic(ProjectedPoints[i], sym);
                map.graphics.add(g);
                console.log("success");
            };
        }

        function OnFailed(error, userContext, methodName) {
            if (error !== undefined && error !== null) {
                alert(error.get_message);
            }
        }

    </script>
    
    <input type="button" ID="btnAlert" value="Alert LatLong" OnClick="btnAlert_Click()" />


</asp:Content>

